import Ports from "./ports";
import Slots from "./slot";
import imageLoad from './imageLoad'
import {getImageBlob} from "@/js/api/index";
import drawimg from './drawimg'
class drawborad {
    constructor (param) {
        this.ctx = param.ctx
        this.data = param.data
        this.board = this.data.board;
        this.slots = this.data.slot;
        this.mesh = param.mesh
        this.init()
    }

    findBoard (id) {
        for(let i=0; i<this.board.length; i++){
            if(this.board[i].slot_index == id + 1) return this.board[i]
        }

        return ''
    }

    async init () {
        for (const slot of this.slots) {
            let board = this.findBoard(slot.id);
            const { x, y } = slot.pos;
            const { width, height } = slot.size;
           
            if (board) {
                console.log("画板卡:", board);
               
                const drawInstance = new drawimg({
                    ctx: this.ctx,
                    view: board.view,
                    pos: slot.pos,
                    size: slot.size,
                    ports:board.port
                });
            
                await drawInstance.draw(); //
                /*
                if(board.port.length > 0){
                    // 画板卡上面的点
                    new Ports({
                        ctx: this.ctx,
                        pos:slot.pos,
                        ports:board.port
                    });

                }
                    */
               
                this.mesh.needsUpdate = true;
                console.log("--------开始画-------");
            } else {
                console.log("画槽位:", slot);
                new Slots({
                    ctx: this.ctx,
                    data: {
                        x: x,
                        y: y,
                        width: width,
                        height: height,
                        fillStyle: 'rgba(255, 0, 0, 0.5)',
                        strokeStyle: 'black'
                    }
                });
                
            }

            this.mesh.needsUpdate = true;
        }

        console.log("----------槽位都画完-----------");
    }
   
    async init_() {
        for (const slot of this.slots) {
            let board = this.findBoard(slot.id);
            const { x, y } = slot.pos;
            const { width, height } = slot.size;

            console.log("board:", board, slot);

            if (board) {
                try {
                    let imageData = await imageLoad(board.view);
                    console.log("imagedata:", imageData);

                    // 先清空画布（如果需要清除全部内容）
                    // this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

                    // 绘制图片
                    // 可以选择先用 fillRect 填充背景（可选）
                    // this.ctx.fillRect(0, 0, imageData.width, imageData.height);
                    setTimeout(()=>{
                        this.ctx.drawImage(
                        imageData.img,
                        0,
                        0,
                        imageData.width,
                        imageData.height
                        );

                        console.log("--------开始画-------");
                    }, 2000)
                    
                } catch (e) {
                    console.log("画布错误:", e);
                }
            } else {
            // 没有对应的board，绘制占位或提示
             
                new Slots({
                    ctx: this.ctx,
                    data: {
                    x: x,
                    y: y,
                    width: width,
                    height: height,
                    fillStyle: 'rgba(255, 0, 0, 0.5)',
                    strokeStyle: 'black'
                    }
                });
                
            }
        }

        console.log("----------槽位都画完-----------");
    }

}

export default drawborad